<!-- 组织详情右侧内容组件 -->
<template>
  <div class="wrap">
    <div class="header">
      <div class="box1">
        <div
          :style="{
            marginBottom: '10px'
          }"
        >
          <div
            :style="{
              display: 'inline-block',
              position: 'absolute',
              height: '28px',
              lineHeight: '28px'
            }"
          >
            <span
              :style="{
                lineHeight: '28px',
                marginRight: '10px',
                fontWeight: 700,
                fontSize: '20px'
              }"
              >{{ positionName }}</span
            >
            <span
              :style="{
                height: '24px',
                backgroundColor:
                  headerInfo[6].value === '已启用' ? '#e8f3ff' : '',
                border:
                  headerInfo[6].value === '已启用'
                    ? '1px solid #165dff'
                    : '1px solid red',
                color: headerInfo[6].value === '已启用' ? '#165dff' : 'red',
                padding: '3px 5px'
              }"
              >{{ headerInfo[6].value }}</span
            >
          </div>
        </div>
        <div>
          <a-space class="options">
            <a-button type="outline">调整编制</a-button>
            <a-dropdown @select="handleSelect">
              <a-button type="outline">更多功能</a-button>
              <template #content>
                <a-doption :value="1" v-if="headerInfo[6].value === '停用'"
                  >职位启用</a-doption
                >
                <a-doption
                  :value="2"
                  v-else-if="headerInfo[6].value === '已启用'"
                  >职位停用</a-doption
                >
                <a-doption :value="3">删除</a-doption>
              </template>
            </a-dropdown>
          </a-space>
        </div>
      </div>
      <div class="box2">
        <div
          :style="{
            width: 'calc(100% - 216px)'
          }"
        >
          <a-space wrap :size="23">
            <div
              :style="{
                color: '#86909c'
              }"
              v-for="(item, index) in headerInfo"
              :key="index"
            >
              {{ `${item.label}：`
              }}<span
                :style="{
                  color: item.value !== '停用' ? '#000' : 'red'
                }"
                >{{ item.value }}</span
              >
            </div>
          </a-space>
        </div>
        <div class="box2-main">
          在职:
          <span
            :style="{
              fontSize: '24px',
              color: '#165dff',
              fontWeight: 600
            }"
            >13</span
          >人
        </div>
      </div>
    </div>
    <div class="container">
      <a-tabs lazy-load type="rounded">
        <a-tab-pane key="1" title="职位信息">
          <PositionInfo></PositionInfo>
        </a-tab-pane>
        <a-tab-pane key="2" title="在职人员">
          <PositionOnJobs></PositionOnJobs>
        </a-tab-pane>
        <a-tab-pane key="3" title="历任人员">
          <PositionHistoryOnJob></PositionHistoryOnJob>
        </a-tab-pane>
        <a-tab-pane key="4" title="操作历史">
          <PositionHistory></PositionHistory>
        </a-tab-pane>
      </a-tabs>
    </div>

    <a-modal
      :width="'50%'"
      :visible="modalVisible"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
      unmountOnClose
      title-align="center"
    >
      <template #title>
        {{
          modalType === 1
            ? '职位启用'
            : modalType === 2
            ? '职位停用'
            : '删除职位'
        }}
      </template>
      <div>
        {{
          modalType === 1
            ? '是否启用该职位？'
            : modalType === 2
            ? '是否停用该职位？'
            : '是否删除该职位？'
        }}
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import {
  GetPositionDefault,
  ChangePositionState,
  DelPosition
} from '@/apis/management/organization/positionManagement';
import PositionInfo from './Components/PositionInfo/index.vue';
import PositionOnJobs from './Components/PositionOnJobs/index.vue';
import PositionHistoryOnJob from './Components/PositionHistoryOnJob/index.vue';
import PositionHistory from './Components/PositionHistory/index.vue';
import { getFlatDept, getJobDetail } from '@/utils/common';

const route = useRoute();
// 档案id
let id = Number(route.query.id);
let ownerType = Number(route.query.ownerType);
onBeforeRouteUpdate((to) => {
  id = Number(to.query.id);
  ownerType = Number(to.query.ownerType);
  getData();
});

let positionName = ref('');

const headerInfo = reactive([
  {
    label: '职位编码',
    value: ''
  },
  {
    label: '职位类别',
    value: ''
  },
  {
    label: '编制人数',
    value: ''
  },
  {
    label: '关联职务',
    value: ''
  },
  {
    label: '所属公司',
    value: ''
  },
  {
    label: '所属部门',
    value: ''
  },
  {
    label: '启用状态',
    value: ''
  }
]);

// 获取数据
const getData = async () => {
  try {
    const res: any = await GetPositionDefault({
      id
    });
    positionName.value = res.name;
    headerInfo[1].value = res.positionType;
    headerInfo[6].value = res.enable === 1 ? '已启用' : '停用';
    res.useTemplate.collectionModel.forEach((item1: any) => {
      item1.controlModel.forEach((item2: any) => {
        let ctlCode = item2.ctlCode,
          ctlValue = item2.ctlValue.ctlValue;
        switch (ctlCode) {
          // 职位名称
          // case 'C7341027925C943708F3AEF98703ECC47':
          //   positionName.value = item.value;
          //   break;
          // 职位编码
          case 'CB25F6DA9F83C4424BBC37E8756BB871E':
            headerInfo[0].value = ctlValue;
            break;
          // 上级职位
          // case 'ORGANIZATION_SUPERIOR':
          // headerInfo.value.superiorOrganization = item.value;
          //   break;

          // 职位类别
          // case 'C63EC32DCE9CC4BE6AC7649E23234A542':
          //   headerInfo[1].value = item.value;
          //   break;

          // 编制人数
          case 'CD25749DBA68E4BF3BCA616DD63751CB7':
            headerInfo[2].value = ctlValue;
            break;

          // 关联职务
          case 'C1F5AA49A78EC4B4FBD487F4D5887E576':
            (async () => {
              const temp = await getJobDetail(+ctlValue);
              headerInfo[3].value = temp.name;
            })();
            break;

          // 所属公司
          case 'CA8ABCC1480744557B3014C3454465A7E':
            headerInfo[4].value = deptList.value.find(
              (el: any) => el.id == ctlValue
            )?.name;
            break;

          // 所属部门
          case 'CED44AC9966904CD1AB546D309903727C':
            headerInfo[5].value = deptList.value.find(
              (el: any) => el.id == ctlValue
            )?.name;
            break;

          // 启用状态
          // case 'ORGANIZATION_HEADCOUNT':
          //   headerInfo.value.positonType = item.value;
          //   break;
          default:
            break;
        }
      });
    });
  } catch (error: unknown) {
    console.log(error);
  }
};

let deptList = ref(); // 储存部门列表
onMounted(async () => {
  const res = await getFlatDept();
  deptList.value = res;
  getData();
});

/*
  储存更多功能的type
  1 职位启用
  2 职位停用
  3 删除职位
*/
let modalType = ref(0),
  modalVisible = ref(false); // 更多功能弹出框

// 更多功能下拉框
const handleSelect = (val: number) => {
  modalType.value = val;
  modalVisible.value = true;
};

// 确认弹出框
const handleModalOk = async () => {
  try {
    switch (modalType.value) {
      // 职位启用
      case 1:
        await ChangePositionState({
          ids: [id],
          enable: 1
        });
        getData();
        break;
      // 职位停用
      case 2:
        await ChangePositionState({
          ids: [id],
          enable: 2
        });
        getData();
        break;
      // 删除职位
      case 3:
        await DelPosition({
          ids: [id]
        });
        break;
      default:
        break;
    }
    modalVisible.value = false;
  } catch (error: unknown) {
    console.log(error);
  }
};

// 取消弹出框
const handleModalCancel = () => {
  modalVisible.value = false;
};
</script>

<style scoped lang="less">
.wrap {
  .header {
    .box1 {
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      .info-title {
        color: #86909c;
      }
    }
    .box2 {
      display: flex;

      &-main {
        width: 216px;
        height: 60px;
        background-color: #e8f3ff;
        border: 1px solid #165dff;
        text-align: center;
        line-height: 60px;
      }
    }
  }
}
:deep(.arco-tabs-nav-tab) {
  justify-content: center;
}
:deep(.arco-scrollbar.arco-scrollbar-type-track .arco-scrollbar-track) {
  background-color: #fff;
}
</style>
